<script setup lang="ts">
import { getPartOrg } from '@/service/api/sys/dataWarehouse/party'
import GenderRatio from '@/views/dynamic/system/dataWarehouse/partyData/components/genderRatio.vue'
import PartyMemberData from '@/views/dynamic/system/dataWarehouse/partyData/components/partyMemberData.vue'
import Education from '@/views/dynamic/system/dataWarehouse/partyData/components/Education.vue'
import PartyAge from '@/views/dynamic/system/dataWarehouse/partyData/components/partyAge.vue'
import PartyBody from '@/views/dynamic/system/dataWarehouse/partyData/components/partyBody.vue'
import PartyEvent from '@/views/dynamic/system/dataWarehouse/partyData/components/partyEvent.vue'

const part = ref([]) // 行政组织列表
const fillterForm = ref({
  partyOrgId: 1,
  year: 2023
}) // 条件筛选对象
const partyOrgId = ref(0)

watch(
  partyOrgId,
  (value: any) => {
    fillterForm.value.partyOrgId = value[value.length - 1] || 0
  },
  { immediate: true }
)

const getPartOrgData = async () => {
  const res = await getPartOrg()
  console.log(res)
  part.value = res.data
  console.log(part.value)
}

onMounted(() => {
  getPartOrgData()
})
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="flex flex-row-reverse">
      <div class="flex items-center">
        <span class="mr-3 text-xs text-[--auxiliary]">选择年份</span>
        <el-date-picker
          v-model="fillterForm.year"
          type="year"
          placeholder="请选择年份"
          value-format="YYYY"
          format="YYYY"
        />
      </div>
      <div class="mr-10 flex items-center">
        <span class="mr-3 text-xs text-[--auxiliary]">组织</span>
        <el-cascader
          v-model="partyOrgId"
          :options="part"
          :show-all-levels="false"
          placeholder="请选择组织"
          :props="{
            value: 'id',
            label: 'name',
            children: 'childrenList'
          }"
          clearable
        />
      </div>
    </div>
    <div class="grid flex-1 grid-cols-3 grid-rows-2 gap-5 pt-5">
      <!--性别占比-->
      <gender-ratio :filterRule="fillterForm" />
      <!--党员管理-->
      <party-member-data :filterRule="fillterForm" />
      <!--学历学位-->
      <education :filterRule="fillterForm" />
      <!--党龄分布-->
      <party-age :filterRule="fillterForm" />
      <!--党委概况-->
      <party-body :filterRule="fillterForm" />
      <!--党组织活动-->
      <party-event :filterRule="fillterForm" />
    </div>
  </div>
</template>

<style scoped></style>
